<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>注册-Sharing Your Story</title>
		<link rel="Shortcut Icon" href="public/img/favicon.ico" />
		<link rel="stylesheet" href="public/bootstrap/css/bootstrap.min.css" />
		<script src="public/js/jquery-3.2.1.min.js"></script>
		<script src="public/bootstrap/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="public/css/style.css" />
		<script src="public/js/holder.min.js"></script>
	</head>
	
	<script type="text/javascript">
		//点击刷新验证码
		function changeVerCode(obj){
			var currentTime = new Date().getTime();
			obj.src="${pageContext.request.contextPath}/verCode?time" + currentTime;
		}
		
		//输入框获得焦点时隐藏其本身的错误信息
		function hideError(val){
			document.getElementById(val + "Error").innerHTML="";
		}
		
		//学号框失去焦点时检验学号格式是否正确
		//version 1.0 ：仅判断学号位数是否为9（在使用）
		//version 2.0 ：通过读取ajax读取数据库判断学号是否存在，不存在认为学号不合法，此学号被注册过则回显："学号已被注册！"（在使用）
		function checkUserId(){
			var value = document.getElementById("userId").value;
			if(value.length != 9){
				document.getElementById("userIdError").style.color = "red";
				document.getElementById("userIdError").innerHTML="学号格式错误！";
				return false;
			}
			var flag = false;
			$.ajax({
				url:"${pageContext.request.contextPath}/userUIAsync?operation=isLegal",
				async:false,
				type:"POST",
				data:{"inputUserId":value},
				success:function(webData){
					if(webData.isLegal){
						flag = true;
						document.getElementById("userIdError").style.color = "green";
						document.getElementById("userIdError").innerHTML=webData.legalMsg;
					}
					else{
						document.getElementById("userIdError").style.color = "red";
						document.getElementById("userIdError").innerHTML=webData.legalMsg;
					}
				},
				error:function(){
					alert("请求失败");
					flag = false;
				},
				dataType:"json"
			});
			return flag;
		}
		
		//密码框失去焦点时检测姓名格式是否正确
		function checkUserName(){
			var value = document.getElementById("userName").value;
			if(value.length <= 10 && value.length > 0)
				return true;
			document.getElementById("userNameError").innerHTML="姓名最多10个字符且不为空";
			return false;
		}
		
		//检验邮箱格式是否正确
		//version 1.0  使用正则表达式检验邮箱格式是否正确（在使用）
		//version 2.0  使用正则表达式检验邮箱格式是否正确&&使用ajax访问数据库确保邮箱唯一。
		function checkEmail(){
			var value = document.getElementById("userEmail").value;
			var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;         //@author 脚本之家 麻球科技
			if(!re.test(value)){
				document.getElementById("userEmailError").innerHTML="邮箱格式错误！";
				return false;
			}
			$.ajax({
				url:"${pageContext.request.contextPath}/userUIAsync?operation=checkEmail",
				async:false,
				type:"POST",
				data:{"inputEmail":value},
				success:function(webData){
					if(webData.isExist == false){
						document.getElementById("userEmailError").style.color="green";
						document.getElementById("userEmailError").innerHTML="邮箱可使用！";
						return true;
					}
					document.getElementById("userEmailError").style.color="red";
					document.getElementById("userEmailError").innerHTML="邮箱已被注册！";
					return false;
				},
				error:function(){
					alert("请求失败");
					return false;
				},
				dataType:"json"
			});
			return true;
		}
		
		//密码框失去焦点时检测密码格式是否正确
		//version 1.0 ：仅判断密码个数是否在[6, 10]区间中。（在使用）
		//version 2.0 ：通过正则表达式判断是否密码是否是数字和密码的组合
		function checkUserPwd(){
			var value = document.getElementById("userPwd").value;
			if(value.length <= 10 && value.length >= 6)
				return true;
			document.getElementById("userPwdError").innerHTML="密码格式不正确！";
			return false;
		}
		
		//确认密码框失去焦点时检测两次输入密码是否一致
		function checkConfirmPwd(){
			var confirmPwd = document.getElementById("confirmPwd").value;
			var userPwd = document.getElementById("userPwd").value;
			if(confirmPwd == userPwd)
				return true;
			document.getElementById("confirmPwdError").innerHTML="两次输入的密码不一致！";
			return false;
		}
		
		//验证码失去焦点时校验验证码是否正确
		function checkVerCode(){
			var value = document.getElementById("verCode").value;
			var flag = true;
			$.ajax({
				url:"${pageContext.request.contextPath}/userUIAsync?operation=verCode",
				async:false,
				type:"POST",
				data:{"inputVerCode":value},
				success:function(webData){
					if(webData.isError == false){
						document.getElementById("verCodeError").style.color="green";
						document.getElementById("verCodeError").innerHTML="验证码正确！";
						flag = true;
					}else{
						document.getElementById("verCodeError").style.color="red";
						document.getElementById("verCodeError").innerHTML="验证码错误！";
						flag = false;
					}
				},
				error:function(){
					alert("请求失败");
					return false;
				},
				dataType:"json"
			});
			return flag;
		}
		
		//所以判定都通过时可以提交，否则不能提交表单
		function checkForm(){
			if(checkUserId()&checkUserName()&checkEmail()&checkUserPwd()&checkConfirmPwd()&checkVerCode())
				return true;
			return false;
		}
	</script>
	
	<body>
		
		<!--顶部效果-->
		<%@ include file= "/WEB-INF/zpublicpages/header.jsp" %>
		
		<!--注册标识-->
		<div class="login-title">注册</div>
		<!--注册框-->
		<div class="row">
			<div class="col-md-offset-3 col-md-6">
				<div class="form-line-up"></div>
				<div class="row">
					<div class="col-md-offset-1 col-md-10">
						<div class="panel panel-primary">
							<div class="panel-heading">
								<div class="panel-title" style="text-align: center;">
									<img style="border-radius: 50%;" src="holder.js/100x100" alt="">
								</div>
							</div>
							<div class="panel-body">
								<form action="${pageContext.request.contextPath}/userServlet?operation=register" method='post' onsubmit="return checkForm()">
									<!-- userId -->
									<div class="form-group">
										<div class="input-group input-group-lg">
											<span class="input-group-addon">
												<span class='glyphicon glyphicon-user'></span>
											</span>
											<input type="text" class='form-control'
												 onfocus="hideError('userId')" onblur="checkUserId()"
												 placeholder='学号' name="userId" id="userId" />
										</div>
										<h4 class = "error" id="userIdError"></h4>
									</div>
									
									<!-- userName -->
									<div class="form-group">
										<div class="input-group input-group-lg">
											<span class="input-group-addon">
												<span class='glyphicon glyphicon-user'></span>
											</span>
											<input type="text" class='form-control'
												 onfocus="hideError('userName')" onblur="checkUserName()"
												 placeholder='姓名' name="userName" id="userName" />
										</div>
										<h4 class = "error" id="userNameError"></h4>
									</div>
									
									<!-- userEmail -->
									<div class="form-group">
										<div class="input-group input-group-lg">
											<span class="input-group-addon">
												<span class='glyphicon glyphicon-user'></span>
											</span>
											<input type="text" class='form-control'
												 onfocus="hideError('userEmail')" onblur="checkEmail()"
												 placeholder='邮箱' name="userEmail" id="userEmail" />
										</div>
										<h4 class = "error" id="userEmailError"></h4>
									</div>
									
									<!-- userPwd -->
									<div class="form-group">
										<div class="input-group input-group-lg">
											<span class="input-group-addon">
												<span class='glyphicon glyphicon-lock'></span>
											</span>
											<input type="password" class='form-control' 
												 onfocus="hideError('userPwd')" onblur="checkUserPwd()" 
												 placeholder='密码' name="userPwd" id="userPwd" />
										</div>
										<h4 class = "error" id="userPwdError"></h4>
									</div>
									
									<!-- confirmPwd -->
									<div class="form-group">
										<div class="input-group input-group-lg">
											<span class="input-group-addon">
												<span class='glyphicon glyphicon-lock'></span>
											</span>
											<input type="password" class='form-control'
								 				 onfocus="hideError('confirmPwd')" onblur="checkConfirmPwd()" 
												 placeholder='确认密码' name="confirmPwd" id="confirmPwd" />
										</div>
										<h4 class = "error" id="confirmPwdError"></h4>
									</div>
									
									<!-- verification code -->
									<div class="form-group">
										<div class="input-group input-group-lg">
											<span class="input-group-addon">
												<span class='glyphicon glyphicon-info-sign '></span>
											</span>
											<input type="text" class='form-control' placeholder='验证码' name="verCode" id="verCode"
											 onfocus = "hideError(verCode)" onblur="checkVerCode()" style="width:310px">&nbsp;&nbsp;
											<span>
												<img onclick="changeVerCode(this)" src = "${pageContext.request.contextPath}/verCode" />
											</span>
										</div>
										<h4 class="error" id="verCodeError"></h4>
									</div>
									
									<!-- submit -->
									<div class="form-group ok" style="text-align: center;">
										<input style="width: 100%;" type="submit" value="注册" class='btn btn-primary btn-lg'>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!--底部效果-->
		<%@ include file="/WEB-INF/zpublicpages/footer.jsp"%>
	</body>
</html>